<template>
  <div class="home">
    <div class="_home_main">
      <div class="_home_name">Marketplace</div>
      <div class="_home_name1">
        <!--        <div></div>-->
        <!--        <div>BSC</div>-->
      </div>
      <div class="_home_util">
        <div class="search">
          <el-input
            style="height: 100%"
            v-model="s.q"
            placeholder="Search"
            :suffix-icon="Search"
            @keyup.enter.native="init"
          />
        </div>
        <div class="_home_select">
          <el-select
            v-model="s.sort"
            @change="init"
            placeholder="Select"
            class="m-2"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="_extend"></div>
        <div class="_home_select">
          <el-select v-model="s.type" @change="init" placeholder="Filter">
            <el-option
              v-for="item in filterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="_home_warp">
        <div
          class="_cards"
          v-for="item in list"
          @click="$router.push(`/Detailed?id=${item.id}`)"
          :key="item.id"
        >
          <div v-show="item.product_type==1||item.product_type==2" class="start">{{ item.star }}</div>
          <div class="_card_img_box">
            <img :src="item.image_url" alt="" :style="imgStyle" />
          </div>
          <div class="_card_xx">
            <div>{{ item.name }} #{{ item.num }}</div>
            <div>X{{ item.count }}</div>
          </div>
          <div class="_card_rmb">
            <div>Fixed price</div>
            <div>
              <span></span>
              <span>{{ fromWei(item.fixed_price) }} {{ item.unit }}</span>
            </div>
          </div>
          <div class="_card_rmb">
            <div>Total price</div>
            <div>
              <span></span>
              <span
                >{{ fromWei(item.fixed_price * item.count) }}
                {{ item.unit }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Calendar, Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import http from "../../http";
import { isMobile } from "../../common/util";
import store from "../../store";

const s = ref({
  q: store.state.searchKey, // 关键词
  sort: store.state.sortType, // 排序条件
  type: store.state.filterType, // 筛选类型
});

const list = ref([]);

const filterOptions = [
  // warrior,illusion，frame,things
  {
    label: "All",
    value: "0",
  },
  {
    label: "Warrior",
    value: "2",
  },
  {
    label: "Illusion",
    value: "1",
  },
  {
    label: "Frame",
    value: "3",
  },
  {
    label: "Things",
    value: "4",
  },
];

const options = [
  {
    value: "recently",
    label: "Recently listed",
  },
  {
    value: "lowest",
    label: "Lowest fixed Price",
  },
  {
    value: "highest",
    label: "Highest total Price",
  },
];

// async function getData() {

// }

async function init() {
  store.state.filterType = s.value.type;
  store.state.searchKey = s.value.q;
  store.state.sortType = s.value.sort;
  console.log("init----", s.value);
  var res = await http.get(
    `/api/nft-sales?q=${s.value.q}&sort=${s.value.sort}&type=${s.value.type}&page=1`
  );
  console.log("/api/nft-sales---", res);
  if (res.code === 200) {
    list.value = res.list;
  }
}

init();
</script>

<script>
export default {
  computed: {
    imgStyle() {
      return document.body.clientWidth <= 750
        ? {
            height: "100vw",
            maxWidth: "375px",
            maxHeight: "350px",
          }
        : {
            height: "243px",
            maxWidth: "400px",
          };
    },
  },
};
</script>

<style scoped lang="scss">
/*.home {*/
/*  padding-bottom: 176px;*/
/*}*/

.el-select-dropdown__item {
  padding-left: 15px;
}

._home_name {
  font-size: 50px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #393939;
  text-align: center;
}

._home_name1 {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;

  div {
    &:nth-child(1) {
      border-radius: 50%;
      width: 38px;
      height: 38px;
      background: url("@/assets/logo1.png") no-repeat center;
      background-size: cover;
    }

    &:nth-child(2) {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #383838;
      margin-left: 8px;
    }
  }
}

._home_util {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.search {
  width: 240px;
  height: 40px;
}
._extend {
  flex: 1;
}

._home_select {
  width: 196px;
  height: 40px;
  margin-left: 8px;
}

@media screen and (max-width: 750px) {
  ._home_util {
    flex-direction: column;
  }
  ._extend {
  }
  .search {
    flex: 1;
    width: 100%;
  }
  ._home_select {
    flex: 1;
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
  }
}

:deep(.el-input__inner) {
  height: 100%;
}

:deep(.el-input__inner) {
  height: 40px;
  color: #afafaf;
}

._home_warp {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 107px;
  grid-row-gap: 30px;
  margin-top: 60px;
}
@media screen and (max-width: 750px) {
  ._home_warp {
    display: flex;
    flex-direction: column;
    /*padding: 20px;*/
    /*overflow: hidden;*/
    /*padding: 0*/
  }
}
._cards {
  // width: 286px;
  /*height: 456px;*/
  border: 1px solid #d9d9d9;
  padding: 20px 0px 10px 0px;
  cursor: pointer;
}
._card_img_box {
  text-align: center;
}

.start {
  float: right;
  background: url("../../assets/start.png");
  width: 40px;
  height: 40px;
  background-size: 100% 100%;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  margin-right: 15px;
}
._card_img {
  // height: 90vw;
  // max-width: 350px;
  // max-height: 350px;
  height: 243px;
}
._card_img_mobile {
  height: 90vw;
  max-width: 350px;
  max-height: 350px;
}
._card_xx {
  display: flex;
  align-items: center;
  margin-top: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
  margin-left: 18px;
  margin-right: 18px;
  > div {
    &:nth-child(1) {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #393939;
    }
    &:nth-child(2) {
      font-size: 12px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #fdb919;
      width: 40px;
      height: 20px;
      background: rgba(249, 178, 7, 0.33);
      border-radius: 10px;
      border: 1px solid #fdb71c;
      text-align: center;
      line-height: 20px;
      margin-left: 2px;
    }
  }
}
._card_rmb {
  @include flex;
  margin-bottom: 10px;
  padding-left: 18px;
  margin-right: 18px;
  > div {
    &:nth-child(1) {
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #afafaf;
    }
    &:nth-child(2) {
      display: flex;
      align-items: center;
    }
    span {
      &:nth-child(1) {
        height: 26px;
        /*width: 38px;*/
        /*background: url("../../assets/c1.png") no-repeat center;*/
        background-size: cover;
        /*margin-right: 7px;*/
      }
      &:nth-child(2) {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #383838;
      }
    }
  }
}
</style>
